<!--
 * @FilePath: 创建或插入节点.html
 * @Author: 苏苏少年
 * @Date: 2022-12-06 09:42:44
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <title>Document</title>
    <!-- 
        创建节点：
            createElement()     需要传入节点的标签名称，返回创建的元素对象创建一个新的节点
            createTextNode()    创建一个文本节点，可以传入文本内容
            innerHTML   也能达到创建节点的效果，直接添加到指定位置了

        插入节点：
            write()        将任意的字符串插入到文档中                                  
            appendChild()  向元素中添加新的子节点，作为最后一个子节点              
            insertBefore() 向指定的已有的节点之前插入新的节点newltem: 要插入的节点exsitingltem: 参考节点需要参考父节点 |

    -->
</head>
<body>
    <button onclick="addPara();">添加段落</button>
    <button onclick="addImg();">添加图片</button>
    <button onclick="addTxt();">添加文本框</button>
    <button onclick="addOptions()">添加选项</button>
    <select name="music">
        <option value="-1">你心内的一首歌</option>
        <option value="0">南山南</option>
        <option value="1">喜欢你</option>
    </select>
    <hr />
    <div id="container">

    </div>
    
</body>
<script>
    function addPara(){
        var div = document.getElementById("container");

        // 方式一
        /* // 创建p标签
        var p = document.createElement("p");
        // 创建文本节点
        var txt = document.createTextNode("这是一个文本节点");
        p.appendChild(txt);
        // 将文本节点追加到p标签!
        div.appendChild(p) */

        // 方式二
        /* var p = document.createElement("p");
        p.innerHTML = "这也是一个文本";
        div.appendChild(p); */

        // 方式三
        var p = "<p>这是文本</p>";
        div.innerHTML += p;
    }

    function addImg(){
        var div = document.getElementById("container");
        /* 方式一 */

        /* // 创建img
        var img = document.createElement("img");
        console.log(img);
        // 设置属性
        img.src = "../img/草莓熊.jpg";
        // 设置宽高属性
        img.width = 100;
        img.height = 100;
        console.log(img);
        // 将图片设置到div中
        div.appendChild(img); */

        // 方式二
        /* var img = document.createElement("img");
        // 设置属性
        img.setAttribute("src","../img/草莓熊.jpg");
        // 设置宽高属性
        img.width = 100;
        img.height = 100;
        console.log(img);
        // 将图片设置到div中
        div.appendChild(img); */

        // 方式三
        var img = "<img src='../img/草莓熊.jpg'  width='100' height='100' />";
        div.innerHTML += img;

    }

    function addTxt(){
        var div = document.getElementById("container");
        
        /* //  创建input元素
        var inp = document.createElement("input");
        // 指定input元素的类型
        inp.type = "text";
        inp.value = "今天天气不错";
        console.log(inp);
        // 将input元素设置到容器中
        div.appendChild(inp); */

        // 方式二
        /* var inp = document.createElement("input");
        // 设置属性
        inp.setAttribute("type","text");
        inp.setAttribute("value","文本信息");
        div.appendChild(inp); */

        // 方式三
        var inp = "<input type='text' value='第三种方式'>";
        div.innerHTML += inp;
        
        
    }


    function addOptions(){
        // 通过name属性值
        var music = document.getElementsByName("music")[0];
        

        // 第一
        /* // 创建下拉选项
        var opt = document.createElement("option");
        // 设置文本和值
        opt.value = "2";
        opt.text = "别看我只是一直羊;";
        // 给下拉框添加下选项
        music.appendChild(opt); */

        // 第二
        /* var opt = document.createElement("option");
        // 设置文本和值
        opt.value = "2";
        opt.text = "胜利的曙光";
        // 
        music.options.add(opt); */

        // 第三
        var opt = '<option value="2">小白兔</option>';
        music.innerHTML += opt;
    }
</script>
</html>